<template>
    <div class="table-cell" :title="text" :style="getCellStyle">
        <img v-if="currentBoundary.iconType === 'CUSTOM'" class="anticon icon-style" :src="boundaryValue.icon" alt="" />
        <component v-else-if="currentBoundary.iconType === 'DEFAULT'" :is="currentBoundary.icon" />
        <span :style="getTextColor">{{ text }}</span>
    </div>
</template>
<script>
    import { computed, defineComponent, onMounted, ref, watch } from 'vue'

    export default defineComponent({
        name: 'CustomTableCell',
        props: {
            text: {
                type: String,
                default: ''
            },
            boundaryValue: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            column: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        setup(props) {
            const getBoundaryInfo = () => {
                props.column.boundaryList?.map(item => {
                    if (setCurrentBoundary(item)) {
                        currentBoundary.value = item
                    }
                })
            }
            const setCurrentBoundary = item => {
                const { boundaryValue, text } = props
                const currentValue = boundaryValue[item.id]
                switch (item.prefix) {
                    case 'GT':
                        return text > currentValue
                    case 'LT':
                        return text < currentValue
                    case 'EQ': //等于
                        return text == currentValue
                    case 'NE': //不等于
                        return text != currentValue
                    case 'GE': //大于等于
                        return text >= currentValue
                    case 'LE': //小于等于
                        return text <= currentValue
                    default:
                        return false
                }
            }
            const currentBoundary = ref({
                icon: '',
                iconType: '',
                color: '#000000',
                prefix: '',
                value: '',
                id: ''
            })
            const getCellStyle = computed(() => {
                const { align = 'left' } = props.boundaryValue
                return { textAlign: align }
            })
            const getTextColor = computed(() => {
                const { color = '#000000' } = currentBoundary.value
                return { color: color }
            })
            const clearBoundary = () => {
                currentBoundary.value = {
                    icon: '',
                    iconType: '',
                    color: '#000000',
                    prefix: '',
                    value: '',
                    id: ''
                }
            }
            watch(
                () => props,
                () => {
                    clearBoundary()
                    getBoundaryInfo()
                },
                { deep: true }
            )
            onMounted(() => {
                getBoundaryInfo()
            })
            return {
                getCellStyle,
                currentBoundary,
                getTextColor
            }
        }
    })
</script>
<style lang="less" scoped></style>
